<script setup lang="ts">
import { ref } from "vue";
import { formRules } from "../utils/rule";
import { FormProps } from "../utils/types";
import { TreeTransfer } from "@/components/TreeTransfer";
import { getKeyList } from "@pureadmin/utils";
import { DictSelect } from "@/components/common/DictSelect";

const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: "",
    ruleType: 2,
    ruleName: undefined,
    priorityList: [],
    depositoryIds: [],
    goodsType: undefined,
    storeIds: [],
    dataAll: [],
    depositoryAll: [],
    storeList: [],
    columnsDetail: []
  })
});

const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}

const defaultProps = {
  children: "children",
  label: "storeName"
};

const checkedIds = ref([]);
const titles = ref(["全部", "全部"]);
//改变选中项
const changeChecked = val => {
  newFormInline.value.storeIds = val;
  console.log("选中项：", val);
};

const handleChange = (value: string[]) => {
  // console.log(value);
};

if (newFormInline.value.storeList && newFormInline.value.storeList.length > 0) {
  checkedIds.value = getKeyList(newFormInline.value.storeList, "id");
}

defineExpose({ getRef });
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :rules="formRules"
    :model="newFormInline"
    label-width="100px"
  >
    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="配置名称" prop="ruleName">
          <el-input
            v-model="newFormInline.ruleName"
            clearable
            placeholder="请输入配置名称"
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="佳叽仓库" prop="depositoryIds">
          <pure-table
            class="drag-table"
            row-key="id"
            border
            :data="newFormInline.depositoryAll"
            :columns="newFormInline.columnsDetail"
            :header-cell-style="{
              background: 'var(--el-fill-color-light)',
              color: 'var(--el-text-color-primary)'
            }"
            height="200"
          />
          <!-- <el-checkbox-group
            v-model="newFormInline.depositoryIds"
            @change="handleChange"
          >
            <el-checkbox
              v-for="item in newFormInline.depositoryAll"
              :key="item.depositoryName"
              :label="item.depositoryName"
              :value="item.depositoryId"
            >
              {{ item.depositoryName }}
            </el-checkbox>
          </el-checkbox-group> -->
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="商品类型" prop="goodsType">
          <!-- <el-select
            v-model.number="newFormInline.goodsType"
            clearable
            class="!w-[full]"
            placeholder="请选择商品类型"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select> -->

          <DictSelect
            v-model="newFormInline.goodsType"
            dict-type="PRODUCT_TYPE"
            clearable
          />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="20" class="m-auto">
        <el-form-item label="绑定门店" prop="dataAll">
          <TreeTransfer
            :dataAll="newFormInline.dataAll"
            :checkedIds="checkedIds"
            :titles="titles"
            :defaultProps="defaultProps"
            @changeChecked="changeChecked"
          />
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<style scoped lang="scss">
.asdxsad {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  transition: var(--el-transition-duration-fast);
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
}
</style>
